首页
学习
活动
专区
圈层
工具
发布
    • 综合排序
    • 最热优先
    • 最新优先
    时间不限
  • 来自专栏网络收集

    Vue CLI

    2、Vue CLI 什么是Vue CLI 如果你只是简单写几个Vue的Demo程序, 那么你不需要Vue CLI. Vue CLI是一个官方发布 vue.js 项目脚手架 使用 vue-cli 可以快速搭建Vue开发环境以及对应的webpack配置. Webpack的全局安装 npm install webpack -g image.png Vue CLI的使用 安装Vue脚手架 npm install -g @vue/cli image.png 注意:上面安装的是Vue CLI3的版本,如果需要想按照Vue CLI2的方式初始化项目时不可以的。 image.png Vue CLI2初始化项目 vue init webpack my-project Vue CLI3初始化项目 vue create my-project

    93110编辑于 2022-05-29
  • 来自专栏全栈开发那些事

    Vue CLI

    Vue CLI 1、简介 2、安装 3、创建项目 3.1 vue create 1、简介   在开发大型单页应用时,需要烤炉项目的组织结构、项目构建、部署、热加载、代码单元测试等多方面与核心业务无关的事情 在Vue.js环境中,这个脚手架工具就是Vue CLI,利用这个工具,可以自动生成一个基于Vue.js地单页应用地脚手架项目。 2、安装 可以使用下面的命令安装Vue CLI npm install -g @vue/cli # 或者 yarn global add @vue/cli Vue CLIVue项目开发中基本是必需的, 安装完成之后,可以使用下面的命令检查版本是否正确,同时验证Vue CLI是否安装成功。 3、创建项目   安装完Vue CLI,就可以开始创建一个脚手架项目了。 //Vue CLI创建的HelloWorld组件 | |--App.vue //项目的根组件 | |--main.js //程序入口js文件,加载各种公共组件和所需要用到的插件 |-

    1.4K20编辑于 2023-02-25
  • 来自专栏花猪的学习记录

    Vue学习-Vue CLI

    前言 本文将介绍Vue-CLI的使用。 ---- Vue-CLI 介绍 CLI:Command-Line Interface,俗称脚手架。 使用Vue-CLI可以快速搭建Vue开发环境以及对应的webpack配置。 注意:以下内容主要介绍CLI2和CLI3. 使用前提:需要NodeJS和Webpack 基本使用(CLI2) 安装 在终端键入如下命令(注意指定版本号)进行全局安装: npm install @vue/cli -g 如果想按照Vue-CLI2的方式初始化项目需要安装 CLI3 Vue CLI3与2版本的区别: vue-cli3是基于webpack4打造,vue-cli2是webapck3 vue-cli3的设计原则是“0配置”,移除的配置文件根目录下的build和 项目目录结构 Vue CLI3的目录结构交Vue CLI2要简单许多,需要注意的就是public文件夹,可以把它类比为2版本中的static文件夹。

    1.2K20编辑于 2022-02-17
  • 来自专栏cwl_Java

    VUE-vue-cli

    9.vue-cli 9.1.介绍和安装 在开发中,需要打包的东西不止是js、css、html。还有更多的东西要处理,这些插件和加载器如果我们一一去添加就会比较麻烦。 幸好,vue官方提供了一个快速搭建vue项目的脚手架:vue-cli 使用它能快速的构建一个web工程模板。 官网:https://github.com/vuejs/vue-cli 安装命令:npm install -g vue-cli 9.2.快速上手 我们新建一个module: ? 用vue-cli命令,快速搭建一个webpack的项目:vue init webpack ? ? 前面几项都走默认或yes 下面这些我们选no ? 最后,再选yes,使用 npm安装 ? 9.4.单文件组件 需要注意的是,我们看到有一类后缀名为.vue的文件,我们称为单文件组件 ? 每一个.vue文件,就是一个独立的vue组件。

    1.2K20发布于 2020-02-11
  • 来自专栏前端技术地图

    vue-cli

    ---- vue-cli 说到 CLI, 不得不提Rails框架,它可能是框架提供 CLI 的先祖(具体历史没有深入考究). 后来 vue-cli 汲取着前者的很多优点,把这块做大做优了(看来 vue 很擅长做这些事情). 如果要扩展 webpack,一般只有 eject,这就走回了手动配置 webpack 的老路, 不可取. vue-cli 也是一个’渐进式’的 clivue-cli 提供了默认的 preset,但不阻止你对其进行扩展 其实插件机制本身并没有什么技术难度, 换句话说插件其实就是一个协议的设计. vue-cli 插件的协议如下: 命名: @vue/cli-plugin-*或vue-cli-plugin-*. package.json *文件进行配置 基本流程 现在来看看一个 vue-cli 内部的基本流程, Service 的插件实现是 vue-cli 比较有意思的点.

    4K10发布于 2019-08-07
  • 来自专栏用代码征服天下

    Vue CLI使用

    1.Vue CLI介绍 如果你只是简单写几个Vue的Demo程序, 那么你不需要Vue CLIVue CLI是一个官方发布 vue.js 项目脚手架 使用 vue-cli 可以快速搭建Vue开发环境以及对应的webpack配置. 脚手架长什么样子? ? 1.2Vue CLI使用 安装Vue脚手架 npm install -g @vue/cli 注意:上面安装的是Vue CLI3的版本,如果需要想按照Vue CLI2的方式初始化项目时不可以的。 Vue CLI2初始化项目 vue init webpack my-project Vue CLI3初始化项目 vue create my-project 2.Vue CLI2详解 2.1Vue CLI2 3.Vue CLI3 vue-cli 3 与 2 版本有很大区别 vue-cli 3 是基于 webpack 4 打造,vue-cli 2 还是 webapck 3 vue-cli 3 的设计原则是

    1.7K20发布于 2020-07-31
  • 来自专栏JokerDJ

    vue-cli学习笔记-vue-cli的安装

    vue-cli学习笔记-vue-cli的安装 vue-cli是什么? vue-clivue官方提供的脚手架工具,默认搭建好了一个项目的基本架子,我们在其基础上进行相应修改即可。 github下载地址:链接 全局安装vue-cli cmd命令 npm install -g @vue/cli 查看版本/是否安装成功 vue -V 初始化Vue项目 vue create (n) 运行项目 cd vue-demo , npm run serve 访问localhost:8080 解读项目的目录结构 main.js Vue.config.productionTip = false $mount手动挂载 import Vue from 'vue' import App from '. /App.vue' //阻止启动生产消息 Vue.config.productionTip = false // $mount手动挂载 /* render:function(createElement

    47510编辑于 2023-11-27
  • 来自专栏java开发的那点事

    从零开始学VUEVue CLI(全局安装 CLI)

    全局安装 cli npm install @vue/cli -g 执行安装 C:\Users\ext.zhangyugen1>npm install @vue/cli -g npm WARN deprecated -> C:\Users\ext.zhangyugen1\AppData\Roaming\npm\node_modules\@vue\cli\bin\vue.js > core-js-pure@3.14.0 \AppData\Roaming\npm\node_modules\@vue\cli\node_modules\ejs > node . /cli@4.5.13 added 933 packages from 584 contributors in 186.993s 查看版本 C:\Users\ext.zhangyugen1>vue -- version @vue/cli 4.5.13 C:\Users\ext.zhangyugen1> 视屏安装的是 3.x 现在最新的是4.x了 作者:彼岸舞 时间:2021\06\28 内容关于:VUE

    1.3K50发布于 2021-07-01
  • 来自专栏前端之攻略

    Vue cli入门 原

    最近看到一个vue cli入门的例子,写的非常详细,对入门vue cli很有帮助,原文链接 http://blog.csdn.net/sinat_17775997/article/details/70482291 我按照此例,完整的写了一遍代码,并稍微修改下 首先 vue cli 安装,我已写过一个博客https://my.oschina.net/u/2612473/blog/1535690, ? from 'vue' import App from '. /router' Vue.use(ElementUI) Vue.config.productionTip = false /* eslint-disable no-new */ new Vue({ from 'vue' import Router from 'vue-router' import Index from '..

    65620发布于 2019-04-04
  • 来自专栏前端说吧

    vue-cli使用

    1.全局安装vue-cli cnpm i vue-cli -g 2.监测安装版本 vue -V  V : version 3.指定目录下新建项目 vue init webpack [项目名] 按自己的意愿配置

    90930发布于 2018-06-25
  • 来自专栏编程

    Vue-cli解析

    步骤如下: 安装vue-cli 以webpack模版安装目录 这样之后,我们就可以使用IDE打开目录了。 此处注明我的vue-cli的版本2.9.2,以免之后改版之后,误导读者。 具体的还是需要去了解vue-loader这个webpack的loader加载器。 其实的两个方法,其中一个是来合并path路径的,另一个是加载Eslint的rules的。 module => 配置了一些eslint、vue、js、图片资源、字体图标、文件等加载的loader。详细的可以去看webpack的官方网站。 node => 此处部分有注释,主要是阻止一些webpack的默认注入行为,因为在vue中,已经具备了这些功能。 总结 本篇文章,主要总结了一下vue-cli生成的文件中,其中的一些配置参数和文件大致的作用。有不到位的地方,希望大家可以指正。同时希望我们共同进步,共勉。

    1.3K60发布于 2018-01-26
  • 来自专栏郭少华

    Vue全家桶)Vue-cli

    Vue-cli Vue-clivue官方出品的快速构建单页应用的脚手架 安装vue-cli 安装vue-cli的前提是你已经安装了npm,安装npm你可以直接下载node的安装包进行安装。 如果该命令不可以使用,需要安装node软件包,根据你的系统版本选择下载安装就可以了 npm install vue-cli -g 如果vue -V的命令管用了,说明已经顺利的把vue-cli安装到我们的计算机里了 初始化项目 $ vue init <template-name> <project-name> init:表示我要用vue-cli来初始化项目 <template-name>:表示模板名称,vue-cli webpack-simple-一个简单webpack+vue-loader的模板,不包含其他功能,让你快速的搭建vue的开发环境。 目录结构.png npm run build 命令 npm run build命令后,vue-cli会自动进行项目发布打包当前目录下会有dis目录,把dis目录下的文件放到服务器就可以了

    1.3K30发布于 2018-09-11
  • 来自专栏web秀

    Vue-CLI是什么?Vue-CLI2.x到Vue-CLI3.x有哪些进步?

    Vue-CLI是什么? Vue-CLIVue.js的脚手架,用于自动生成vue.js+webpack的项目模板。 2、通过 @vue/cli + @vue/cli-service-global 快速开始零配置原型开发。 CLI (@vue/cli) 就是一个全局安装的 npm 包,提供了终端(dos面板)里的 vue命令。 Vue-CLI2.x到Vue-CLI3.x有哪些进步? 一、创建项目命令变了 # Vue-CLI2.x vue init webpack project-name # Vue-CLI3.x vue create project-name 同时大家可以看看Vue-CLI3

    1.3K20发布于 2019-09-04
  • 来自专栏Lambda

    Vue-cli教程

    一、安装vue-cli 安装vue-cli的前提是你已经安装了npm,安装npm你可以直接下载node的安装包进行安装。你可以在命令行工具里输入npm -v  检测你是否安装了npm和版本情况。 npm没有问题,接下来我们可以用npm 命令安装vue-cli了,在命令行输入下面的命令: 1 npm install vue-cli -g -g :代表全局安装。 1 $ vue init <template-name> <project-name> init:表示我要用vue-cli来初始化项目 <template-name>:表示模板名称,vue-cli官方为我们提供了 第2节:Vue-cli项目结构讲解 vue-cli脚手架工具就是为我们搭建了开发所需要的环境,为我们省去了很多精力。有必要对这个环境进行熟悉,我们就从项目的结构讲起。 第3节:解读Vue-cli的模板 我们通过两节课的讲解,你对vue-cli应该有了基本的了解,这节我们主要了解一下Vue-cli的模板操作,包括增加模板,修改模板,以及一个常规模板的基本结构。

    2.4K80发布于 2018-01-23
  • 来自专栏正则

    vue开发之vue-cli2与vue-cli3的对比

    文件夹,增加了vue.config.js文件  2. vue-cli3移除了 static 静态文件夹  3. vue-cli3新增了 public 文件夹  4. vue-cli3将index.html 移动到 public 中 配置项 配置文件目录 vue-cli2:config文件夹 vue-cli3:vue.config.js文件 配置域名 vue-cli2:在config中的dev.env.js 和prod.env.js中分别配置 vue-cli3:在vue.config.js中配置 跨域时配置域名 vue-cli2:在config中的index.js中配置 image.png vue-cli2 跨域时配置域名 vue-cli3:在vue.config.js中配置 image.png vue-cli3 跨域时配置域名 baseUrl 从 vue cli 3.3 起已弃用,请使用publicPath 注意:具体的vue cli配置可参考该网站:https://cli.vuejs.org/zh/config/#vue-config-js

    70840发布于 2021-11-03
  • 来自专栏网络收集

    Vue CLI3

    Vue CLI3 vue-cli 3 与 2 版本有很大区别 vue-cli 3 是基于 webpack 4 打造,vue-cli 2 还是 webapck 3 vue-cli 3 的设计原则是“0配置 ”,移除的配置文件根目录下的,build和config等目录 vue-cli 3 提供了 vue ui 命令,提供了可视化配置,更加人性化 移除了static文件夹,新增了public文件夹,并且index.html

    25210编辑于 2022-05-29
  • 来自专栏小蔚记录

    vue-cli 搭建

    一、安装vue-cli 安装vue-cli的前提是你已经安装了npm,安装npm你可以直接下载node的安装包进行安装。你可以在命令行工具里输入npm -v 检测你是否安装了npm和版本情况。 npm没有问题,接下来我们可以用npm 命令安装vue-cli了,在命令行输入下面的命令: npm install vue-cli -g -g :代表全局安装。 安装完成后,可以用vue -V来进行查看 vue-cli的版本号。注意这里的V是大写的。我这里版本号是2.8.1. ? 我们在命令行中输入npm run build命令后,vue-cli会自动进行项目发布打包。 的知识,如果你想完全弄明白vue-cli,我建议最好是有调理的阅读所有代码,这对你以后成为vue实际项目 的开发很有帮助。

    1.8K20发布于 2019-09-11
  • 来自专栏热爱IT

    vue-cli2.0与vue-cli3.0区别

    首先你要熟悉vue-cli2.0 1.项目目录结构 ? ? 可以明显的看出来,vue-cli2.0与3.0在目录结构方面,有明显的不同(vue3.0我是安装了css预处理器,所以看上去内容更丰富哈) vue-cli3.0移除了配置文件目录,config 和 build  文件夹 同时移除了 static 静态文件夹,新增了 public 文件夹,细心的你,打开层级目录还会发现, index.html 移动到 public 中 2.配置项 vue-cli2.0的域名配置 4.其他  全局安装vu-cli 3.0  npm install -g @vue/cli    如果之前安装了2.0版本,先卸载 npm uninstall -g vue-cli )    安装完 vue  ui (上面已经说了)  在2.x0中,你使用 Vue.set 来给对象新增一个属性时,这个对象的所有 watcher 都会重新运行  而在3.0中,只有依赖那个属性的 watcher 才会重新运行

    1.3K20发布于 2020-07-14
  • 来自专栏Marigold

    Vue-CLI快速搭建Vue项目

    目录 Vue-CLI简介 可视化界面搭建Vue项目 完全命令行搭建Vue项目 Vue-CLI简介 Vue CLI 是一个基于 Vue.js 进行快速开发的完整系统,提供: 通过 @vue/cli 实现的交互式的项目脚手架 通过 @vue/cli + @vue/cli-service-global 实现的零配置原型开发。 一个运行时依赖 (@vue/cli-service),该依赖: – 可升级; – 基于 webpack 构建,并带有合理的默认配置; – 可以通过项目内的配置文件进行配置; – 可以通过插件进行扩展。 一套完全图形化的创建和管理 Vue.js 项目的用户界面。 Vue CLI 致力于将 Vue 生态中的工具基础标准化。 详细内容请查看vue-cli官网。 使用之前要确保已经安装npm、node.js以及vue,安装完成后可以通过命令行查看。

    68941编辑于 2022-06-17
  • 来自专栏Java全栈

    VueVue CLI什么关系?

    很多小伙伴搞不清VueVue CLI什么关系,版本号区别,来解惑一下。 今天又有同学在学习我的课程的时候,问到VueVue CLI,它们之间的版本号也搞混了。 面试经常会问这道题:说说VueVue CLI是什么关系?有什么区别? 做个类比: Vue CLI = Vue + 一堆的js插件。 使用方式: Vue CLI是一个脚手架,通俗点说就是代码生成器,可以快速生成一套基于Vue完整的前端框架,单独编译,单独部署。可以再集成各种第三方插件,扩展出更多的功能。 Vue是渐近式框架,你可以用它一个功能,也可以用全家桶。 比如你可以在老的jsp或thymeleaf项目里,引入vue.js,只用它核心的数据绑定功能 版本号对应: Vue CLI 4.5以下,对应的是Vue2 Vue CLI 4.5及以上,对应的是Vue3,

    1.4K20发布于 2021-01-14
领券